<template>
   <div class="kecheng">
<!-- 对话框区域 -->
<div class="kecheng2">
<el-button type="primary" @click="isshow = true" class="btn1">添加课程</el-button>
 <el-button type="danger" class="btn1" @click="deletekc">删除课程</el-button>
 <el-button type="primary" ><a :href="hrf">导出课程</a></el-button>
 <el-upload 
  class="upload-demo btn2" :headers="headers" style="  display: inline-block;"
  :action="hre"
  :on-success="chengong"
  :on-change="handleChange"
  :file-list="exclelist">
  <el-button size="small" type="primary">批量添加课程</el-button>
  <!-- <div slot="tip" class="el-upload__tip" style="color:red;">注意：批量操作前，点击导出班级，导出模板，只能上传excel文件</div> -->
    <span slot="tip" class="el-upload__tip " style="color:red;">注意：批量操作前，点击导出课程，导出模板，只能上传excel文件</span>
</el-upload>

<el-dialog title="添加课程" :visible.sync="isshow">
  <el-form :model="addkc">
       <el-form-item label="课程名称">
    <el-input v-model="addkc.courseName" placeholder="请输入课程名称"></el-input>
  </el-form-item>
   <el-form-item label="选择学年">
    <el-input v-model="addkc.schoolYear" placeholder="请输入学年--格式：2022学年秋"></el-input>
   </el-form-item>
      <!-- <el-select v-model="addkc.schoolYear" clearable placeholder="请选择学年">
    <el-option
      v-for="(item,index) in xnlist"
      :key="index"
      :value="item">
    </el-option>
  </el-select> -->
  <el-form-item label="选择课程类型">
      <el-select v-model="addkc.type" value="毕业设计" placeholder="请选择添加课程类别">

    <el-option
      v-for="(item,index) in kclb"
      :key="index"
      :value="item.name">
     
    </el-option>
  </el-select><br>
    <span style="color:red; font-size:10px;">注意：1-理论教学，2-实践教学，3-毕业设计</span>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="isshow = false">取 消</el-button>
    <el-button type="primary" @click="addkecheng">确 定</el-button>
  </div>
</el-dialog>
</div>
<!-- 筛选课程区域 -->
<div class="kecheng3">
    <el-select v-model="value.schoolYear" clearable placeholder="请选择筛选条件">
    <el-option
      v-for="(item,index) in xnlist"
      :key="index"
      :value="item">
    </el-option>
  </el-select>
  <el-button type="primary" @click="tjget">筛选</el-button>
</div>
<!-- 列表区域 -->
<div class="kecheng4">
  <el-table
   border
    ref="multipleTable"
    :data="kechenglist"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="课程id"
      width="150">
      <template slot-scope="scope">{{ scope.row.courseId}}</template>
    </el-table-column>
    <el-table-column
      prop="courseName"
      label="课程名称"
      width="200">
    </el-table-column>
     <el-table-column
      prop="schoolYear"
      label="课程时间"
      width="200">
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
<!-- 分页区域 -->
<div class="kecheng5">
<el-pagination
  background
   @current-change="handleCurrentChange"
   :current-page="page"
    :page-size='limit'
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
</div>
   </div>
</template>

<script>
import {http,URL} from '../../../../../uitl/request'
import { getToken } from '@/api/login';
export default {
    created(){
        this.getkecheng()
    },
    data(){
        return{
          kechenglist:[] ,
          isshow:false ,
          xnlist:[],
          value:{schoolYear:''},
          del:[],
          page:1,
          limit:15,
          kclb:[],
          addkc:{courseName:'',schoolYear:'',type:1},
         headers:{ "token":getToken()},
        hre:URL+`/course/saveCourseByExcel`,
        exclelist:[],
        hrf:URL+'/course/exportCourse'
        }
    },
    methods:{
//获取课程列表和学年列表
async getkecheng(){
    try {
        const {data:res}=await http.post(`/course/findCourseList/${this.page}/${this.limit}`)
        if(res.data == undefined) {
              this.$message.error(res.msg)
              return
            }
        this.kechenglist=res.data.records
        const dataxn=await http.get('/course/findSchoolYearList')
        if(res.data == undefined) {
              this.$message.error(res.msg)
              return
            }
        this.xnlist=dataxn.data.data
        const datakc=await http.get('/course/getCourseType')
        if(res.data == undefined) {
              this.$message.error(res.msg)
              return
            }
        this.kclb=datakc.data.data
      // console.log(this.kclb);
    } catch (err) {
        Promise.reject(err)
    }
},
//文件上传成功时调用
chengong(){
  this.$message.success('上传成功')
this.getkecheng()

},
//获取删除的数组元素
 handleSelectionChange(val) {
        this.del = val;
      },
//获取当前页数
 async handleCurrentChange(val) {
       //  console.log(`当前页: ${val}`);
         this.page = val;
          const {data:res}=await http.post(`/course/findCourseList/${this.page}/${this.limit}`,this.value)
        this.kechenglist=res.data.records
        // console.log(this.page);
     },
//携带条件查询
async tjget(){
    this.page=1
    try {
        const {data:res}=await http.post(`/course/findCourseList/${this.page}/${this.limit}`,this.value)
        this.kechenglist=res.data.records
    } catch (err) {
        Promise.reject(err)
    }
},
//添加课程
async addkecheng(){
    const list=this.addkc
    if (this.addkc.type==='理论教学') {
     list.type=1
    }
  if (this.addkc.type==='实践教学') {
    list.type=2
    }
    else{
        list.type=3
    }
//console.log(list);
    try {

       const {data:res}=await http.post('/course/saveCourse',list)
       if(!res.data) {
              this.$message.error('请填写完整表单')
              return
            }
       this.$message({type:'success',message:res.data})
      
       this.addkc={courseName:'',schoolYear:'',type:1}
         const list12=await http.post(`/course/findCourseList/${this.page}/${this.limit}`)
        this.kechenglist=list12.data.data.records
       this.isshow=false
    } catch (err) {
        Promise.reject(err)
    }
},
//删除课程
async deletekc(){
    const arr=[]
    this.del.map(ite=>{
       arr.push( ite.courseId)
    })
try {
    const req=await http.post('/course/removeCourse',arr)
    if(!req.data.data) {
              this.$message.error(req.data.msg)
              return
            }
    this.$message({type:'success',message:req.data.data})
     const {data:res}=await http.post(`/course/findCourseList/${this.page}/${this.limit}`)
        this.kechenglist=res.data.records
} catch (err) {
    Promise.reject(err)
}
},
//查看详情
handleEdit(index,row){
this.$router.push({path:'/kecheng',query:row})
//console.log(row);
}
    }
}
</script>

<style scoped>
.kecheng{
    line-height: 30px;
}
.btn1{
   margin-top: -20px;
}
.kecheng2{
  display: inline-block;
 margin-left: -900px;

}
.kecheng3{
    width: 500px;
    height: 50px;
    margin-bottom: 50px;
    display: inline-block;
    position: absolute;
    top: 80px;
    right: 20px;
    }
    .btn2{
      position: absolute;
      top: 80px;
      margin-left: 10px;
    }
</style>